<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
  {{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="shortcut icon" href="{{config.base_url}}/favicon.ico">
  <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
  <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
  <link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
  {{#config.rtl_layout}}
  <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.rtl.css">
  <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap-rtl/dist/css/bootstrap-rtl.min.css">
  {{/config.rtl_layout}}

  {{{config.analytics}}}

</head>
<body class="{{body_class}}">

  <!-- Header -->
  <header class="header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <a href="{{config.base_url}}/" class="logo">{{config.site_title}}</a>
        </div>
        <div class="col-sm-6">
          {{#config.googleoauth}}
          <form class="form-inline pull-right">
            {{#config.authentication}} {{#loggedIn}} &nbsp;
            <span>{{profile.displayName}}</span> &nbsp;
            <a href="{{config.base_url}}/auth/logout" class="btn btn-info">{{lang.login.logout}}</a> {{/loggedIn}} {{^loggedIn}} &nbsp;
            <a href="{{config.base_url}}/auth/login" class="btn btn-info">{{lang.login.login}}</a> {{/loggedIn}} {{/config.authentication}}
          </form>
          {{/config.googleoauth}}

          {{^config.googleoauth}}
          <form class="form-inline pull-right">
            {{#config.authentication}}
              {{#loggedIn}}
                <div class="dropdown">
                  <button class="btn btn-info dropdown-toggle" type="button" id="userDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{username}}
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropDown">
                    <li><a href="{{config.base_url}}/logout" class="btn btn-info">{{lang.login.logout}}</a></li>
                  </ul>
                </div>
              {{/loggedIn}}
              {{^loggedIn}}
                &nbsp;<a href="{{config.base_url}}/login" class="btn btn-info">{{lang.login.login}}</a>
              {{/loggedIn}}
            {{/config.authentication}}
          </form>
          {{/config.googleoauth}}
          
          <form class="search-form form-inline pull-right" action="{{config.base_url}}/">
            <div class="form-group">
              <label class="sr-only" for="search">{{lang.global.search}}</label>
              <input type="search" class="form-control" name="search" id="search" size="30" value="{{search}}" placeholder="{{lang.global.search}}">
            </div>
          </form>
        </div>
      </div>
    </div>
  </header>

  <!-- Main -->
  <div class="container-fluid">
    {{{yield}}}
  </div>

  <!-- Footer -->
  <footer class="footer">
    <div class="container-fluid">
      {{#config.copyright}}
        <p class="copyright pull-right">{{{config.copyright}}}</p>
      {{/config.copyright}}
    </div>
  </footer>

  {{#config.allow_editing}}
  {{#loggedIn}}

    <!-- Modal: Add Page -->
    <div class="modal fade" id="addModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="{{lang.global.close}}">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">{{lang.global.addPage}}</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for="page-name" class="control-label">{{lang.global.pageName}}:</label>
              <input type="text" class="form-control" id="page-name">
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" type="button">{{lang.global.cancel}}</button>
            <button class="btn btn-primary" id="add-page-confirm" type="button">{{lang.global.save}}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal: Delete Page -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <h4 class="modal-title" id="myModalLabel">{{lang.global.reallyDeletePage}}</h4>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" type="button">{{lang.global.no}}</button>
            <button class="btn btn-primary" id="delete-page-confirm" type="button">{{lang.global.yes}}</button>
          </div>
        </div>
      </div>
    </div>

  {{/loggedIn}}
  {{/config.allow_editing}}

  <!-- JavaScript -->
  <script src="{{config.base_url}}/lib/jquery/dist/jquery.min.js"></script>
  <script src="{{config.base_url}}/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="{{config.base_url}}/lib/highlightjs/highlight.pack.min.js"></script>
  <script src="{{config.base_url}}/lib/fitvids/fitvids.min.js"></script>
  <script src="{{config.base_url}}/lib/masonry-layout/dist/masonry.pkgd.min.js"></script>
  <script src="{{config.base_url}}/scripts/ghostdown.js"></script>
  <script src="{{config.base_url}}/scripts/raneto.js"></script>

</body>
</html>
